<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/theme.css">
<link rel="stylesheet" href="/css/element-ui/lib/theme-chalk/style.css">

<div id="demoPage">
    <!-- 列表 -->
    <el-table :data="tableData" border>
        <el-table-column prop="order_contacts" label="order_contacts" width="180"></el-table-column>
        <el-table-column prop="order_contacts" label="order_contacts" width="380"></el-table-column>
        <el-table-column prop="order_contacts" label="order_contacts"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
            <el-dropdown trigger="click">
                <el-button type="primary">
                    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <el-button type="primary" size="small" v-on:click="onClickRow(1)">按钮1</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-button type="primary" size="small" v-on:click="onClickRow(2)">按钮2</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-button type="primary" size="small" v-on:click="onClickRow(3)">按钮3</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-button type="primary" size="small" v-on:click="onClickRow(4)">按钮4</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-button type="primary" size="small" v-on:click="onClickRow(5)">按钮5</el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="total" v-on:current-change="currentChange"></el-pagination>
    <!-- 弹窗 -->
    <el-dialog title="提示"
            :visible.sync="modalShow"
            width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="modalShow = false">取 消</el-button>
            <el-button type="primary" @click="modalShow = false">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script src="/js/vue/vue-2.7.js"></script>
<script src="/js/element-ui/lib/index.js"></script>
<script src="/js/utils/ajaxFunc.js"></script>
<script>
const newAuth = '{{ $newAuth }}';

$(function() {
    let orderListVm = new Vue({
        el: '#demoPage',
        data: {
            page: 1,
            limit: 10,
            total: 0,
            tableData: [],
            modalShow: false
        },
        methods: {
            currentChange(page) {
                this.page = page
                this.getList()
            },
            getList(val) {
                if(val) {
                    this.page = 1
                    this.tableData = []
                }
                
                ajaxPostFunc('/v1/api/productOrder/paging', {
                    'shopOrderExt.status': 3,
                    page: this.page,
                    limit: this.limit
                }, {
                    'newAuth': newAuth
                }, res => {
                    this.total = res.total
                    this.tableData = res.data
                })
            },
            onClickRow(type) {
                if(type == 1) {
                    this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                    });
                } else if(type == 2) {
                    const h = this.$createElement;

                    this.$notify({
                        title: '标题名称',
                        message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
                    });
                } else if(type == 3) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                    
                    }).catch(() => {
                          
                    });
                } else if(type == 4) {
                    this.$prompt('请输入物流单号', '修改物流信息', {
                        confirmButtonText: '提交',
                        cancelButtonText: '取消',
                        inputValue: '123',
                        inputPattern: /\S/,
                        inputErrorMessage: '物流单号不能为空'
                    }).then(({ value }) => {
                        
                    })
                } else if(type == 5) {
                    this.modalShow = true
                }
            }
        },
        mounted() {
            this.getList('change')
        }
    })
})
</script>